<template>
	<div class="header">
		<el-row :gutter="20">
			<el-col :span="16">
				<el-menu default-active="" class="el-menu-demo" mode="horizontal" :router="true">
					<el-menu-item index="/" popper-class="首页"><i class="fa fa-home"></i></el-menu-item>
					<el-menu-item><a target="_blank" href="http://hgzx.zhaoyun.site/#/book/"><i class="fa fa-book"></i></a></el-menu-item>
					<el-menu-item><a target="_blank" href="http://hgzx.zhaoyun.site/#/video/"><i class="fa fa-video-camera"></i></a></el-menu-item>
					<el-menu-item index="/about"><i class="fa fa-music"></i></el-menu-item>
					<el-menu-item index="/search?keyword=衣服"><i class="fa fa-shopping-cart"></i></el-menu-item>
					<!-- <el-submenu index="5">
						<template slot="title"><i class="fa fa-yen"></i></template>
						<el-menu-item index="2-1">好券直播</el-menu-item>
						<el-menu-item index="2-2">母婴频道</el-menu-item>
						<el-menu-item index="2-3">大额优惠券</el-menu-item>
						<el-submenu index="2-4">
							<template slot="title">选项4</template>
							<el-menu-item index="2-4-1">选项1</el-menu-item>
							<el-menu-item index="2-4-2">选项2</el-menu-item>
							<el-menu-item index="2-4-3">选项3</el-menu-item>
						</el-submenu>
					</el-submenu> -->
				</el-menu>
			</el-col>
			<el-col :span="8" class="user">
				<el-dropdown trigger="click" @command="userAction">
					<span class="el-dropdown-link cursor">
						<i class="align-middle fa fa-user-circle-o fa-2x" v-if="!$store.state.auth.logged"></i>
						<span v-else>
							<span style="margin-right: 10px;">{{ $store.getters['auth/nick'] }} &nbsp;<i class="fa fa-caret-down"></i></span>
							<el-avatar class="align-middle" :size="45" :src="$store.getters['auth/avatar']"></el-avatar>
						</span>
					</span>
					<el-dropdown-menu slot="dropdown">
						<div v-if="$store.state.auth.logged">
							<el-dropdown-item icon="fa fa-user-o" command="my">我的</el-dropdown-item>
							<el-dropdown-item icon="fa fa-cog" command="setting">设置</el-dropdown-item>
							<el-dropdown-item icon="fa fa-sign-out" command="logout">退出</el-dropdown-item>
						</div>
						<div v-else>
							<el-dropdown-item icon="fa fa-qq" command="login-qq">QQ登录</el-dropdown-item>
							<!-- <el-dropdown-item icon="fa fa-weixin" command="login-weixin">微信登录</el-dropdown-item> -->
							<!-- <el-dropdown-item icon="fa fa-key" command="login-key">密码登录</el-dropdown-item> -->
						</div>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-row>
		<iframe id='modal' style="position: absolute; visibility: hidden; width: 750px; height:500px; top: 30px;border: 1px solid #eee; padding-top: -60px; overflow: hidden; background: white;"></iframe>
	</div>
</template>

<script>
	export default {
		name: 'Header',
		props: {
			msg: String
		},
		data() {
			return {
				loggedIn: false,
				user: null
			}
		},
		mounted() {
			this.loggedIn = this.$api.auth.loggedIn();
			if (this.loggedIn) {
				this.user = this.$api.auth.getUser();
			}
		},
		methods: {
			userAction(action) {
				if ("login-qq" == action) {
					this.login("qq");
				} else if ("logout" == action) {
					this.logout();
				}
			},
			login(type) {
				var open_q = false,
					win_q, t_q;
				if ("qq" == type) {
					var url = "https://graph.qq.com/oauth2.0/authorize"
					var params = "?response_type=code" // 获取回access_token
					params += "&client_id=101274723" // 应用的appid
					params += "&scope=get_user_info,list_album,upload_pic,do_like" //请求用户授权列表
					params += "&state="  + location.href //移动端会丢失redirect参数，用state来替代
					params += "&redirect_uri=http://zhaoyun.site/login/qq?redirect=" + location.href
					var qqAuthUrl = url + params;
					//方案一， 页面跳转授权
					window.location.href = qqAuthUrl;
					return;
					//方案二， 弹框授权
					win_q = window.open(qqAuthUrl, '', 'width=750px,height=500,top=100');
					open_q = true;
				}
				console.debug("open_q", open_q)
				if (open_q) { // 如果新窗口打开为真
					var that = this;
					t_q = setInterval(function() {
						var loggedIn = localStorage.getItem('loggedIn');
						if (loggedIn) {
							that.user = JSON.parse(localStorage.getItem('loggedInUser'));
							that.loggedIn = true;
							win_q.close();
						}

						console.debug("loggedInUser", that.user)

						console.debug("win_q.closed", win_q.closed)
						if (win_q && win_q.closed) { // 如果这个新窗口存在并且已经被关闭
							open_q = false;
							clearInterval(t_q);
							t_q = null;
						}
					}, 200);
				}
				console.debug("t_q", t_q)
			},
			logout() {
				this.$store.commit("auth/logout");
				this.$message({
					message: '已退出登录',
					type: 'success'
				});
			}
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.el-menu {
		background-color: inherit !important;
	}

	.el-menu.el-menu--horizontal {
		border-bottom: none !important;
	}

	.el-divider--horizontal {
		margin: 0 !important;
	}

	.user {
		line-height: 60px;
		text-align: right;
	}
</style>
